<template>
  <div class="header">
    <div class="header-left">
        <div class="iconfont iconfanhui back-icon"></div>
    </div>
    <div class="header-input">
        <span class="iconfont iconsousuo"></span>
        输入城市/景点/游玩主题
    </div>
    <router-link to="/city">
        <div class="header-right">
            {{this.city}}
            <span class="iconfont icondown-fill arrow-icon"></span>
        </div>
    </router-link>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name:'HomeHeader',
  computed:{
      ...mapState(['city'])
  }
}
</script>

<style scoped>
  .header{
    height: .86rem;
    line-height: .86rem;
    display:flex;
    background:#00bcd4;
    color:#fff;
    }
   .header-left{
       width:.64rem;
       float:left;
   }
   .back-icon{
       font-size:.4rem;
       text-align: center;
   }
   .header-input{
        /* 有空间时放大，无空间时缩小 */
       flex:1;
       height:0.64rem;
       line-height: 0.64rem;
       margin-top:0.12rem;
       margin-left:0.2rem;
       padding-left: 0.2rem;
       background: #fff;
       border-radius:0.1rem;
       color:#ccc;
   }
   .header-right{
       min-width:1.04rem;
       padding:0 0.1rem;
       float:right;
       text-align:center;
       color:#fff;
   }
   .arrow-icon{
       margin-left:-0.05rem;
       font-size:0.3rem;
   }
</style>